<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-03-06 01:21:11
 * @LastEditors: lyw
 * @LastEditTime: 2022-03-06 19:55:53
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-06 10:43:39
 * @LastEditors: lyw
 * @LastEditTime: 2022-03-05 21:27:16
-->
<template>
  <div id="app">
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <message></message>
      <usertext></usertext>
    </div>
    <div class="supplier">
      <div style="margin-top:10px">店铺名</div>
      <p>咨询商品：</p>
      <p>所在地区：</p>
      <p>主营类目：</p>
      <div style="text-align: center"><el-button>联系电话</el-button></div>
    </div>
  </div>
</template>

<script>
import card from "./card.vue";
import list from "./list.vue";
import message from "./message.vue";
import usertext from "./usertext.vue";
export default {
  components: {
    card,
    list,
    message,
    usertext,
  },
  mounted: function () {
    this.$store.dispatch("initData");
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#app {
  margin: 20px auto;
  width: 900px;
  height: 500px;
  overflow: hidden;
  border-radius: 10px;
  .sidebar,
  .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: #2e3238;
    width: 200px;
  }
  .main {
    width: 540px;
    float: left;
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
  .supplier {
    width: 145px;
    height: 500px;
    background: rgb(228, 225, 225);
    float: left;
    padding-left: 5px;
  }
}
.supplier p {
  font-size: 12px;
}
</style>